<template>
  <div ref="boxRef" class="main">
    <div class="layout-container">
      <dv-border-box-10>
        <div style="padding: 20px"></div>
      </dv-border-box-10>
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useIndex } from "@/utils/useDraw.js"; //组件  大屏自适应
const boxRef = ref();

// 生命周期
onMounted(() => {
  const { appRef, calcRate, windowDraw } = useIndex(boxRef.value);
  windowDraw();
  calcRate();
});
onUnmounted(() => {
  const { unWindowDraw } = useIndex(boxRef.value);
  unWindowDraw();
});
</script>
  <style lang="scss" scoped>
.main {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;

  .layout-container {
    width: 100%;
    height: 100%;
  }
}
</style>